<script setup>
import * as echarts from "echarts";
import { ref, onMounted, reactive } from "vue";
var myChart = null;
const beginNum = ref(1);
const endNum = ref(100);

function getRandomInt(min, max) {
  min = Math.ceil(min); // 确保min是整数
  max = Math.floor(max); // 确保max是整数
  return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的整数
}

let echartsData = ref([]);
let echartsDataX = ref([]);
/**
 * @description:生成一百万条数据1000000
 * */
console.time();
for (let index = 0; index < 1000000; index++) {
  echartsData.value.push(getRandomInt(beginNum.value, endNum.value));
  echartsDataX.value.push(index);
}
console.log("生成一百万条数据时间");
console.timeEnd();

var option;

option = {
  toolbox: {
    feature: {
      brush: {
        type: ["rect"], // 开启圈选工具
        // type: ["rect", "polygon", "lineX", "lineY", "keep", "clear"], // 开启圈选工具
      },
    },
  },
  brush: {
    id: "1", // 组件ID
    z: 1, // 选框的 z-index
    throttleType: "debounce",
    xAxisIndex: "all",
    yAxisIndex: "all",
    toolbox: ["rect"], // toolbox 中的按钮 rect 矩形，polygon 任意形状等。
    // toolbox: ["rect", "keep", "clear"], // toolbox 中的按钮 rect 矩形，polygon 任意形状等。
    // brushLink: [1, 2], // 指定相关系列关联在一起，一起展示刷选突出的效果。可设置 'all'。
    // seriesIndex: [1, 2], // 指定相关系统可以触发刷选效果，可设置 'all'。
    // geoIndex: [1, 2], // 指定相关 geo 地理坐标系可触发刷选， 可设置 'all'。
    // xAxisIndex: [1, 2], // 指定相关的 xAxisIndex 可刷选，可设置 'all'。
    // yAxisIndex: [1, 2], // 指定相关的 yAxisIndex 可刷选，可设置 'all'。
    brushType: "rect", // 默认的刷选类型
    brushMode: "multiple", // 默认刷选的模式
    transoformable: true, // 刷选的区域是否可以移动
    throttleType: "fixRate", // 在刷选区域变化时，展示数据动画的更新模式，是刷选停止后还是按照一定时间频率来更新
    throttleDelay: 100, // 刷选区域变化时，数据动画更新时间。
    removeOnClick: true, // 是否支持单击清除所有选框
    // 刷选框样式
    brushStyle: {
      color: "red", // 图形颜色
      borderColor: "red", // 图形描边颜色
      borderWidth: 5, // 图形描边宽度
      borderType: "solid", // 图形描边线类型
      borderDashOffset: 5, // 图形描边线为虚线时，虚线的偏移量
      borderCap: "butt", // 指定线段末端形状
      borderJoin: "bevel", // 两个线段相连部分的形状
      borderMiterLimit: 10, // borderJoin 为 miter 时,斜接面比例
      shadowBlur: 20, // 图形阴影大小
      shadowColor: "red", // 图形阴影颜色
      shadowOffsetX: 10, // 图形阴影水平偏移量
      shadowOffsetY: 10, // 图形阴影竖直偏移量
      opacity: 0.5, // 图形透明度
    },
    // 选框中的视觉元素样式
    // inBrush: {
    //   symbol: "circle", // 图元图形 可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin'
    //   symbolSize: 32, // 图元大小
    //   color: "red", // 图元颜色
    //   colorAlpha: 0.5, // 图元透明度
    //   opacity: 0.8, // 图元以及其附属物的透明度
    // },
    // 未选中的视觉元素样式
    // outOfBrush: {
    //   symbol: "circle", // 图元图形 可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin'
    //   symbolSize: 32, // 图元大小
    //   color: "red", // 图元颜色
    //   colorAlpha: 0.5, // 图元透明度
    //   opacity: 0.8, // 图元以及其附属物的透明度
    // },
  },
  tooltip: {
    trigger: "axis", // 触发类型：坐标轴触发
    axisPointer: {
      type: "cross", // 十字准线指示器，可选为：'line' | 'shadow'
    },
  },
  dataZoom: [
    {
      type: "inside", // 滑块类型 值有slider和inside
      xAxisIndex: [0],
      start: 0,
      end: 1,
      minSpan: 0, // 用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100。
      maxSpan: 100,
    },
  ],
  xAxis: {
    type: "category",
    data: echartsDataX.value,
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: echartsData.value,
      type: "line",
      smooth: true,
      sampling: "average",
      // large: true,
      // largeThreshold: 100000,
    },
  ],
};

const nodeData = reactive({
  one: "",
  two: "",
});

function resetFn() {
  nodeData.one = "";
  nodeData.two = "";
}
function query() {
  let dataList = [];
  let xDATA = [];
  console.time();
  for (let index = 0; index < 1000000; index++) {
    dataList.push(getRandomInt(beginNum.value, endNum.value));
    xDATA.push(nodeData.one + index);
  }
  console.log("重新生成数据");
  console.timeEnd();

  option.series[0].data = dataList;
  option.xAxis.data = xDATA;
  console.time();
  myChart.setOption(option, {
    notMerge: true,
  });
  console.log("重新渲染时间");
  console.timeEnd();
  // resetFn();
}

onMounted(() => {
  var chartDom = document.getElementById("main");
  myChart = echarts.init(chartDom);

  console.time();
  option && myChart.setOption(option);
  console.log("渲染时间");
  console.timeEnd();

  myChart.on("click", function (params) {
    // if (!nodeData.one) {
    //   nodeData.one = params.dataIndex;
    // } else {
    //   nodeData.two = params.dataIndex;
    // }
  });

  // myChart.on("brushSelected", function (params) {
  //   console.log(params);

  //   return;
  // });

  myChart.on("brushEnd", (params) => {
    console.log(params);
    console.log(myChart.getOption());
    const getXdata = myChart.getOption().xAxis[0].data
    nodeData.one = getXdata[params.areas[0].coordRange[0][0]];
    nodeData.two = getXdata[params.areas[0].coordRange[0][1]];
    query(params);
  });
  // myChart.on("brushend", function (params) {
  //   console.log(params);
  //   return;
  //   var brushComponents = params.brushComponents;
  //   // 遍历所有圈选组件
  //   brushComponents.forEach(function (brushComponent) {
  //     var seriesIndex = brushComponent.seriesIndex[0]; // 获取圈选的系列索引
  //     var dataIndex = brushComponent.selectedDataIndex; // 获取圈选的数据索引
  //     // 处理选中的数据
  //     var selectedData = dataIndex.map(function (dataIndexItem) {
  //       return option.series[seriesIndex].data[dataIndexItem];
  //     });
  //     console.log("选中的数据:", selectedData);
  //   });
  // });
});
</script>

<template>
  <ul>
    <li>数据区间-开始 <input type="text" v-model="beginNum" /></li>
    <li>数据区间-结束 <input type="text" v-model="endNum" /></li>
    <li>节点1：{{ nodeData.one }}</li>
    <li>节点2：{{ nodeData.two }}</li>
    <li @click="query">查询</li>
    <li @click="resetFn">重置</li>
  </ul>
  <div id="main"></div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
#main {
  width: 50vw;
  height: 50vh;
}
li {
  list-style: none;
  cursor: pointer;
}
</style>
